<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import api from '/@/api/email/index';

defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
})

const orderSourceOptions = ref<{
    label: string
    value: string
}[]>([])
const emit = defineEmits(['update:modelValue', 'receiveData'])

const cascaderPanelRef = ref()
const selectedValues = ref([])
const formInline = reactive({
    orderSourceParam: '',
})

// 查询订单来源
const getInquiryAndOrderList = async () => {
    const { code, data } = await api.order.inquiryAndOrderList(formInline)
    if (code === 200) {
        orderSourceOptions.value = data
    }
}
const submit = () => {
    if (selectedValues.value.length) {
        emit('receiveData', {
            values: selectedValues.value.join(','),
            labels: cascaderPanelRef.value.getCheckedNodes()[0].pathLabels.join(' / ')
        })
        close()
    } else {
        ElMessage.warning('请选择订单')
    }
}
const close = () => {
    emit('update:modelValue', false)
}
onMounted(() => {
    getInquiryAndOrderList()
})

defineExpose({
    selectedValues,
    orderSourceOptions
})
</script>
<template>
    <TwoDialog :modelValue="modelValue" title="订单来源" @submit="submit" @close="close">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="">
                <el-input v-model="formInline.orderSourceParam" placeholder="关键字" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getInquiryAndOrderList">刷新</el-button>
            </el-form-item>
        </el-form>
        <el-cascader-panel v-model="selectedValues" ref="cascaderPanelRef" :options="orderSourceOptions" class="cascader-panel" />
    </TwoDialog>
</template>
<style lang="scss" scoped>
.cascader-panel {
    width: fit-content;
}
</style>